<template>
	<view class="flex_c_c page">
		<!-- Tabbar页面 -->
		<view class="flex1 custom-tabbar-page" v-if="list['a'].is" :style="{ display: onKey === 'a' ? '' : 'none' }">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Index />
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['b'].is" :style="{ display: onKey === 'b' ? '' : 'none' }">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Word />
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['c'].is" :style="{ display: onKey === 'c' ? '' : 'none' }">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Resume />
			</scroll-view>
		</view>
		<view class="flex1 custom-tabbar-page" v-if="list['d'].is" :style="{ display: onKey === 'd' ? '' : 'none' }">
			<scroll-view class="wh_100" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<My />
			</scroll-view>
		</view>


		<view class="flex_r fj_a pan-tabbar">
			<view class="flex_r_c flex1 tabbar-item-box" :id="key" v-for="(item, key) in list" :key="key"
				@click="onTabbar(key)">
				<view class="tabbar-item" :class="{ tabbar_item: key == onKey }">
					<view class="tabbar-item-icon">
						<view class="tabbar-item-icon-str01">
						</view>
						<view class="tabbar-item-icon-str02">
						</view>
						<view class="tabbar-item-icon-img tabbar-item-icon-img-on">
							<image class="wh_100" :src="item.onIcon" mode="widthFix"></image>
						</view>
						<view class="tabbar-item-icon-img tabbar-item-icon-img-off">
							<image class="wh_100" :src="item.offIcon" mode="widthFix"></image>
						</view>
					</view>
					<view class="tabbar-item-title">
						{{ item.title }}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue"
import Index from "@/pages/index/index.vue"
import Resume from "@/pages/resume/resume.vue"
import My from "@/pages/my/my.vue"
import a1 from "@/static/tabbar-icons/a1.png"
import a2 from "@/static/tabbar-icons/a2.png"
import b1 from "@/static/tabbar-icons/b1.png"
import b2 from "@/static/tabbar-icons/b2.png"
import c1 from "@/static/tabbar-icons/c1.png"
import c2 from "@/static/tabbar-icons/c2.png"
import d1 from "@/static/tabbar-icons/d1.png"
import d2 from "@/static/tabbar-icons/d2.png"
import Word from "@/pages/word/word.vue"

interface TabItem {
	is: boolean
	title: string
	onIcon: string
	offIcon: string
}

const onKey = ref<string>("")

const list = reactive<Record<string, TabItem>>({
	a: {
		is: true,
		title: "首页",
		onIcon: a1,
		offIcon: a2,
	},
	b: {
		is: false,
		title: "搜索",
		onIcon: b1,
		offIcon: b2,
	},
	c: {
		is: false,
		title: "简历",
		onIcon: c1,
		offIcon: c2,
	},
	d: {
		is: false,
		title: "我的",
		onIcon: d1,
		offIcon: d2,
	},
})

const tabbarPageScrollLower = () => {
	// 滚动到底部事件
}

const onTabbar = (key: string) => {
	switchTabbarPage(key)
	onKey.value = key
}

const switchTabbarPage = (key: string) => {
	if (onKey.value === key) return
	const selectPageFlag = list[key]?.is
	if (selectPageFlag === undefined) return
	if (selectPageFlag === false) {
		list[key].is = true
	}
}

// 模拟 onLoad
nextTick(() => {
	onKey.value = "a"
})
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	background-color: #f1f1f1;

	.custom-tabbar-page {
		width: 100%;
		height: 0;
	}
}



.pan-tabbar {
	position: relative;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0rpx 6rpx;
	background-color: #fff;
	padding-top: 14rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 14rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 14rpx);


	.tabbar-item-box {
		box-sizing: border-box;

		// border: 1px solid #000;
		.tabbar-item {
			position: relative;
			margin-left: 0rpx;
			width: 38px;
			height: 38px;
			border-radius: 30px;
			transition: all 0.4s;
			color: #684EA3;

			.tabbar-item-icon {
				box-sizing: border-box;
				position: absolute;
				z-index: 2;
				top: 5px;
				left: 0px;
				bottom: 3px;
				width: 30px;
				height: 30px;
				transition: all 0.3s;

				// border: 1px solid #684EA3;
				.tabbar-item-icon-str01 {
					opacity: 0;
					position: absolute;
					z-index: 1;
					left: 2px;
					bottom: 2px;
					width: 18px;
					height: 18px;
					border-radius: 3px;
					background-color: rgba(255, 255, 255, 0.5);
					backdrop-filter: blur(2px);
					transform: rotate(0deg);
					transform-origin: bottom left;
					transition: all 0.6s;
				}

				.tabbar-item-icon-str02 {
					position: absolute;
					z-index: 0;
					left: 15px;
					bottom: 6px;
					width: 1px;
					height: 1px;
					border-radius: 1px;
					box-shadow: #fff 0px 0px 6px 6px;
					background-color: #fff;
					transition: all 0.3s;
				}

				.tabbar-item-icon-img {
					box-sizing: border-box;
					position: absolute;
					bottom: 4px;
					left: 2px;
					width: 26px;
					height: 26px;
					z-index: 3;
					transition: all 0.5s;
				}

				.tabbar-item-icon-img-on {
					opacity: 0;
				}

				.tabbar-item-icon-img-off {
					opacity: 1;
				}
			}

			.tabbar-item-title {
				position: absolute;
				width: 44px;
				right: 6px;
				bottom: 0;
				top: 0;
				height: 38px;
				line-height: 38px;
				text-align: center;
				font-size: 16px;
				opacity: 0;
				transition: all 0.6s;
			}
		}

		.tabbar_item {
			position: relative;
			box-sizing: border-box;
			width: 90px;
			height: 38px;
			background-color: #E7DBFA;

			.tabbar-item-title {
				opacity: 1;
			}

			.tabbar-item-icon {
				left: 10px;

				.tabbar-item-icon-str01 {
					opacity: 1;
					transform: rotate(-20deg);
					transition-delay: 0.3s;
				}

				.tabbar-item-icon-str02 {
					box-shadow: #C484EA 0px 0px 6px 6px;
					background-color: #C484EA;
				}

				.tabbar-item-icon-img-on {
					opacity: 1;
				}

				.tabbar-item-icon-img-off {
					opacity: 0;
				}

			}


		}
	}

}

// 以下是通用css
.flex_r {
	display: flex;
	flex-direction: row;
}

.flex_c {
	display: flex;
	flex-direction: column;
}

.fj_b {
	justify-content: space-between;
}

.fj_a {
	justify-content: space-around;
}

.fj_c {
	justify-content: center;
}

.fa_c {
	align-items: center;
}

.flex_c_c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flex_r_c {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.flex1 {
	flex: 1;
}

.wh_100 {
	width: 100%;
	height: 100%;
}

.z_index2 {
	position: relative;
	z-index: 2;
}

.hover_class {
	position: relative;
	overflow: hidden;
}

.hover_class::after {
	position: absolute;
	z-index: 2;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.1);
}

.rotate_45 {
	transform: rotate(45deg);
}

.rotate_90 {
	transform: rotate(90deg);
}

.rotate_180 {
	transform: rotate(180deg);
}
</style>